import type { TablePaginationConfig } from 'ant-design-vue';
import type {
  FilterValue,
  SorterResult,
} from 'ant-design-vue/es/table/interface';

import type { Reactive, Ref } from 'vue';
import { computed, h, ref } from 'vue';

import { Tag } from 'ant-design-vue';

export default function useTableHook(
  fetchTableData: () => Promise<void> | void,
  tablePagination: Reactive<Record<string, any>>,
  tableFilterData: Ref<Record<string, FilterValue>>,
) {
  const statusFilteredValue = computed({
    get: () => tableFilterData.value.status,
    set: (value: FilterValue) => {
      tableFilterData.value.status = value;
    },
  });
  const sexFilteredValue = computed({
    get: () => tableFilterData.value.sex,
    set: (value: FilterValue) => {
      tableFilterData.value.sex = value;
    },
  });
  const tableColumns = ref<any>([
    // {
    //   title: '序号',
    //   dataIndex: 'user_id',
    //   key: 'user_id',
    //   sorter: true,
    //   sortDirections: ['desc', 'asc'],
    //   customHeaderCell: () => ({ style: { textAlign: 'center' } }),
    //   customCell: () => ({ style: { textAlign: 'center' } }),
    // },
    {
      title: '名称',
      dataIndex: 'user_name',
      key: 'user_name',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center' } }),
      customCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '昵称',
      dataIndex: 'nick_name',
      key: 'nick_name',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center' } }),
      customCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center' } }),
      customCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      key: 'phone',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center' } }),
      customCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      filters: [
        { text: '男', value: 1 },
        { text: '女', value: 2 },
      ],
      filterMultiple: false,
      filteredValue: sexFilteredValue,
      customHeaderCell: () => ({ style: { textAlign: 'center' } }),
      customCell: () => ({ style: { textAlign: 'center' } }),
      customRender: (row: any) => {
        if (row.value === 2) {
          return h(Tag, { color: 'red' }, () => '女');
        } else if (row.value === 1) {
          return h(Tag, { color: 'green' }, () => '男');
        } else {
          return h(Tag, { color: 'grey' }, () => '未知');
        }
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      filters: [
        { text: '禁用', value: 0 },
        { text: '启用', value: 1 },
      ],
      filterMultiple: false,
      filteredValue: statusFilteredValue,
      customHeaderCell: () => ({ style: { textAlign: 'center' } }),
      customCell: () => ({ style: { textAlign: 'center' } }),
      customRender: (row: any) => {
        if (row.value === 0) {
          return h(Tag, { color: 'red' }, () => '禁用');
        } else if (row.value === 1) {
          return h(Tag, { color: 'green' }, () => '启用');
        } else {
          return h(Tag, { color: 'grey' }, () => '未知');
        }
      },
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center' } }),
      customCell: () => ({ style: { textAlign: 'center' } }),
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      customHeaderCell: () => ({ style: { textAlign: 'center' } }),
    },
  ]);
  // 表格变化事件函数
  const tableChange = (
    page: TablePaginationConfig,
    filters: Record<string, FilterValue>,
    sorter: SorterResult<any> | SorterResult<any>[],
  ) => {
    tablePagination.current = page.current as number;
    tablePagination.pageSize = page.pageSize as number;

    tableFilterData.value = filters;
    // 将过滤参数合并到请求参数中
    if (Array.isArray(sorter)) {
      // 处理多列排序情况，取第一个有效的排序器
      if (sorter.length > 0) {
        const firstSorter = sorter[0];
        if (firstSorter?.field && firstSorter?.order) {
          tablePagination.sorter = `${firstSorter.field} ${firstSorter.order}`;
        }
      }
    } else {
      if (sorter.field && sorter.order) {
        tablePagination.sorter = `${sorter.field} ${sorter.order}`;
      }
    }
    fetchTableData();
  };

  return { tableColumns, tableChange };
}
